<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .button {
            z-index: 99;
            position: absolute;
            width: 80%;
            top: 50%;
            left: 50%;
            border-radius: 100%;
            transform: translate(-50%, -50%);
            background-color: #63caff;
            cursor: pointer;
        }

        .button:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        .button:hover + .button-outline {
            width: 85%;
        }

        .button-outline {
            position: absolute;
            width: 75%;
            top: 50%;
            left: 50%;
            border-radius: 100%;
            border: 7px solid #63caff;
            transform: translate(-50%, -50%);
            transition: all 0.25s cubic-bezier(.7, .11, .32, 2);
        }

        .button-outline:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        .button-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            font-size: 96px;
            font-family: "Open Sans", sans-serif;
            color: white;
        }

        .button-container {
            position: relative;
            margin: 0 auto;
            width: 400px;
        }

        .button-container:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        body {
            background-color: #212121;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <div class="button">
            <div class="button-text">
                hover
            </div>
        </div>
        <div class="button-outline"></div>
    </div>
</body>
</html>